<script>
import Vue from 'vue'
import { saveOrUpdate } from '@/api/webDiskDbWorkFileInfo'

export default Vue.extend({
  name: 'AddEditDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: '新增作业'
    },
    workFormParent: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      inputVisible: false,
      inputValue: '',
      rules: {
        workName: [{ required: true, message: '作业主题', trigger: 'blur' }],
        workTag: [{ required: true, message: '作业主题', trigger: 'blur' }]
      },
      workForm: {}
    }
  },
  created() {
    console.log('初始化', this.workFormParent)

    this.workForm = {
      workName: this.workFormParent.workName,
      workTag: this.workFormParent.workTag,
      id: this.workFormParent.id
    }
    console.log('初始化', this.workForm)
  },
  methods: {
    handleClose(tag) {
      this.workForm.workTag.splice(this.workForm.workTag.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue

      if (inputValue) {
        if (this.workForm.workTag.indexOf(inputValue) === -1) {
          this.workForm.workTag.push(inputValue)
        } else {
          this.$message.warning('标签已存在')
        }
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleSubmit() {
      this.$refs.workForm.validate(valid => {
        if (valid) {
          saveOrUpdate(this.workForm).then(res => {
            this.$message.success('作业保存成功')
            this.$emit('afterTask')
          })
        }
      })
    }
  }
})
</script>

<template>
  <div>
    <!-- 弹窗表单 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="workForm" :rules="rules" ref="workForm" label-width="100px">
        <el-form-item label="作业主题" prop="workName">
          <el-input v-model="workForm.workName"/>
        </el-form-item>
        <el-form-item label="标签" prop="workTag">
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">新标签</el-button>
          <el-tag
            style="margin-left: 5px"
            :key="tag"
            v-for="tag in workForm.workTag"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
